<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名: <span>{{ fullName }}</span> <br>
    <button @click="changeFullName">修改全名为li-si</button>
<!--    全名: <span>{{fullName2()}}</span> <br>-->
<!--    全名: <span>{{fullName2()}}</span> <br>-->
  </div>

</template>

<script setup lang="ts" name="Person">
 import {ref, computed} from 'vue'
 let firstName = ref('张')
 let lastName = ref('三')

 function fullName2(){
   console.log(1)
   return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value

 }
 // 这么定义的fullName 是一个计算属性，是只读的
 // let fullName = computed(()=>{
 //   return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
 // })

 // 这么定义的fullName 是一个计算属性，可读可写
 let fullName = computed({
   get(){
     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
   },
   set(val){
     console.log('set',val)
     const [str1, str2] =  val.split('-')
     firstName.value = str1
     lastName.value = str2
   }
 })

 function changeFullName() {
   console.log(fullName)
   fullName.value = 'li-si'
 }

</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>